<template>
  <div id="index">
    <Row class="layout-header">
      <Col span="24">
        <component is="Nabigation"></component>
      </Col>
    </Row>
    <Row class="layout-content">
      <Col span="24">
        <div class="container">
          <component is="Home"></component>
        </div>
      </Col>
    </Row>
    <Row class="layout-footer">
      <Col span="24">
      <component is="Copyright"></component>
      </Col>
    </Row>
  </div>
</template>

<script>
  import Header from '@/components/Header' // 顶部导航
  import Footer from '@/components/Footer' // 左侧菜单
  import Home from '@/components/Home' // 首页

  export default {
    name: 'index',
    components: {
      Nabigation: Header,
      Copyright: Footer,
      Home
    },
    data () {
      return {
        routerPath: '/login',
        spanLeft: 5,
        spanRight: 19
      }
    }
  }
</script>

<style type="text/css" lang="stylus">
  .app {
    background: #f5f7f9;
    display: flex;
    flex-direction column
    height: 100%
  }

  .layout-header, layout-footer {
    max-height: 100px
  }

  .layout-content {
    flex: 1
    display: flex
    .container {
      height: 100%
    }
  }
</style>
